const path = require('path'); //node内置的方法，绝对路径
const HtmlWebpackPlugin = require('html-webpack-plugin'); //在打包文件中生成一个HTML文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //执行打包命令时，先清除旧的打包文件再生成新的打包文件
const webpack = require('webpack');

module.exports = {
    mode: 'development', //设置成开发环境(development)，打包的bundle.js文件不会被压缩，如果设置成生产环境(production)，bundle.js会被压缩，不易阅读
    //devtool: 'cheap-module-eval-source-map', //开发环境-development
    //devtool: 'cheap-module-source-map', //生产环境-production
    // devServer模块（只在本地开发有效，上线无效）
    devServer: {
        // 运行代码的目录
        static: './dist',
        compress: true, //启动gzip压缩
        open: true,  //自动打开默认浏览器
        port: 3000, //端口
        hot: true, // 热更新

        //配置Proxy代理，解决跨域问题
        proxy: {
            '/api': {
                target: 'http://study.jsplusplus.com/', //API服务器的地址
                ws: true,//代理websockets
                changeOrigin: true,//是否跨域
                scure: false,// 如果是https接口，需要加上这个参数
                pathRewrite: {
                    '^/api': ''  //这里理解成用‘/api’代替target里面的地址，后面组件中我们调接口时直接用api代替 比如我要调用'http://
                }
            }
        },
    },
    target: "web",
    entry: './src/index.js', //配置模块的入口-单入口
    //配置模块的入口-多入口
    // entry: {
    //     main: './src/index.js',
    //     sub: './src/index.js',
    // },
    module: {
        rules: [
            //处理图片：file-loader、url-loader
            {
                test: /\.(png|jpg|gif)$/, //可打包的图片格式
                use: [
                    {
                        // loader: 'file-loader',
                        loader: 'url-loader',
                        options: {
                            name: '[name].[ext]', //为你的文件配置自定义文件名模板：配置后图片打包后的名字跟打包前一致
                            outputPath: 'imgs/', //打包后图片存放的路径：imgs/xx.png
                            limit: 1024, // url-loader-超过多少byte后不再打包成DataURL（file-loader没这个配置）
                        }
                    }
                ]
            },
            //处理样式：sass-loader-> postcss-loader -> css-loader -> style-loader
            {
                test: /\.(scss|css)$/,
                //loader执行的顺序：从后往前，从下往上：sass-loader-> postcss-loader -> css-loader -> style-loader
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2, //在 css-loader前应用的 loader的数量-->在旧版的webpack中如果xx.css样式文件中引入了其他的样式文件（@import './logo.scss'）需要加这个配置才会执行
                            modules: true  //启用/禁用 CSS 模块
                        }
                    },
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            //处理iconfont字体图标：file-loader
            {
                test: /\.(svg|eto|ttf|woff)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]', //为你的文件配置自定义文件名模板：配置后图片打包后的名字跟打包前一致
                    outputPath: 'icon/', //打包后图片存放的路径：imgs/xx.png
                }
            },
            //处理es6代码
            {
                test: /\.js$/,
                exclude: /(node_modules)/, //不编译 node_modules模块的js
                use: {
                    loader: 'babel-loader',
                    options: {} //将babel的配置放在.babelrc这个文件夹
                }

            }
        ]
    },

    //插件
    plugins: [
        //在打包文件中生成一个HTML文件
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(), //清除打包文件
        new webpack.HotModuleReplacementPlugin() //热更新
    ],

    // Tree Shaking 
    optimization: {
        usedExports: true, //使用了导入的内容就保留下来
    },
    output: {
        filename: 'bundle.js', // 文件名称（指定名称+目录）-单入口的配置
        // publicPath:'http:baidu.com/', // 配置打包文件生成的html里面引入的js的路径
        // filename: '[name].js', //文件名称（指定名称+目录）-多入口的配置（会以entry的键名作为出口文件的文件名main.js、sub.js）
        //__dirname是node.js的一个全局变量，用于指向当前执行脚本（dirname.js）所在的目录路径，而且是绝对路径。
        path: path.resolve(__dirname, 'dist'), //输出文件目录（将来所有资源输出的公共目录）
    }
}